<template>
  <div class="menuManage zy-content ">
    <Card title="" class="detail-content-layout">
      <Tree :data="treeData" ref="tree" :render="renderContent"></Tree>
    </Card>
    <add-model ref="addModel" @save="save"></add-model>
    <delete-model ref="deleteModel" @save="save"></delete-model>
  </div>
</template>

<script>
import AddModel from './components/addModel.vue'
import DeleteModel from './components/deleteModel.vue'
export default {
  name: "organization",
  components: {
    AddModel,
    DeleteModel
  },
  data() {
    return {
      expandIds:[],
      treeData: [
        {
          title: this.$t('组织架构'),
          expand: true,
          render: (h, { data }) => {
            return h('span', {
              style: {
                display: 'inline-block',
                width: '100%',
                fontSize: '18px'
              }
            }, [

              h('span', [
                h('span', data.title)
              ]),
              h('span', [
                h('Button', {
                  props: Object.assign({}, this.buttonProps, {
                    icon: 'ios-add'
                  }),
                  style: {
                    marginLeft: '8px',
                    marginRight: '8px'
                  },
                  on: {
                    click: () => {
                      this.addClick(data, 'add')
                    }
                  }
                }),
              ])
            ]);
          },
          children: []
        }
      ],
      buttonProps: {
        type: 'default',
        size: 'small',
      }
    }
  },
  mounted() {
    this.getTree()
  },
  methods: {
    getExpandId(){
      const nodes = this.$refs.tree.$data.flatState;
      let ids = [];
      for (let i=0;i<nodes.length;i++){
        if (nodes[i].node.expand && nodes[i].node.id){
          ids.push(nodes[i].node.id)
        }
      }
      this.expandIds = ids
    },
    setExpand(arr){
      for (let i=0;i<arr.length;i++){
        if(this.expandIds.includes(arr[i].id)){
          arr[i].expand = true
        }
        if (arr[i].children){
          this.setExpand(arr[i].children)
        }
      }
    },
    getTree() {
      this.getExpandId()
      this.axios({
        url:"/basic/dept/getDeptTree"
      }).then(res => {
        if (res.code === 200) {
          let data = res.data
          this.setExpand(data)
          this.treeData[0].children = res.data;
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      });
    },
    renderContent(h, { data }) {
      return h('span', {
        style: {
          display: 'inline-block',
          width: '100%',
          fontSize:'15px'
        }
      }, [
        h('span', [
          h('span', data.deptName)
        ]),
        h('span', {
          style: {
            display: 'inline-block',
            float: 'right',
            marginRight: '32px'
          }
        }, [
          h('Button', {
            props: Object.assign({}, this.buttonProps, {
              icon: 'ios-add'
            }),
            style: {
              marginLeft: '8px',
              marginRight: '8px'
            },
            on: {
              click: () => {
                this.addClick(data, 'add')
              }
            }
          }),
          h('Button', {
            props: Object.assign({}, this.buttonProps, {
              icon: 'ios-remove'
            }),
            style: {
              marginRight: '8px'
            },
            on: {
              click: () => {
                this.removeClick(data)
              }
            }
          }),
          h('Button', {
            props: Object.assign({}, this.buttonProps, {
              icon: 'ios-create-outline'
            }),
            on: {
              click: () => {
                this.addClick(data, 'edit')
              }
            }
          })

        ])
      ]);
    },
    addClick(data, submitTo) {
      this.$refs.addModel.open(data, submitTo);
    },
    save (){
      this.getTree();
    },
    removeClick( data) {
      this.$refs.deleteModel.open(data);
    }
  }
}
</script>

<style scoped lang="scss">
.menuManage {
  font-size: 15px;


}
</style>

<style lang="scss">
.menuManage .ivu-btn{
  //color: #00142D;
  //border-color: #00142D;
  i{
    font-weight: bold;
    //color: #00142D;
  }
  &:hover{
    i{
      //color: #035beb !important;
      color: #FFFFFF !important;
    }
    border-color: #035beb;
    background: #035beb;
  }
}
</style>
